<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>国脉康智慧养老平台</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/swiper.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 头部标题 -->
    <header>
        <h1>社村通智慧养老平台</h1>
    </header>
    <!-- 联系我们及在线客服 -->
    <div class="contact">
        <ul>
            <li class="contact_bor">
                <span class="iconfont icon-mobilephone"></span>
                <span>电话</span>
                <div class="contact_phone">123</div>
            </li>
            <li class="contact_bor">
                <span class="iconfont icon-addressbook"></span>
                <span>在线客服</span>
                <div class="contact_business">123</div>
            </li>
            <li>
                <span class="iconfont icon-headlines"></span>
                <span>其他</span>
                <div class="contact_message">123</div>
            </li>
        </ul>
    </div>
    <!--轮播图-->
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <a href="javascript:;">
                    <img src="images/index/yljg-banner1.jpg">
                </a>
            </div>
            <div class="swiper-slide">
                <a href="javascript:;">
                    <img src="images/index/yyjh-banner1.jpg">
                </a>
            </div>
            <div class="swiper-slide">
                <a href="javascript:;">
                    <img src="images/index/jjyl-banner1.jpg">
                </a>
            </div>
        </div>
        <!-- Add Arrows(左右箭头) -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <!-- Add Pagination(导航小点点) -->
        <div class="swiper-pagination"></div>
    </div>

    <!--居家、养老院登录入口-->
    <div class="mui-table">
        <div class="mui-table-cell">
            <a href="javascript:;">
                <div class="orange-bg padbox">
                    <h5>居家养老平台</h5>
                    <h3>免费体验入口</h3>
                </div>
            </a>
        </div>
        <div class="mui-table-cell">
            <a href="javascript:;">
                <div class="purple-bg padbox">
                    <h5>养老院平台</h5>
                    <h3>免费体验入口</h3>
                </div>
            </a>
        </div>
    </div>
    <!--详细模块-->
    <div class="btnbox" style="margin-bottom:30px;">
        <div class="btnfloat borderbox border-bottombox">
            <img class="imgbox" src="images/index/icon-da.png">
            <div class="mui-media-body">
                <h3 class="redcololr">档案管理</h3>
                <p>老人个人信息，家属信息，健康状况，兴趣爱好等信息进行动态统一管理。</p>
            </div>
        </div>
        <div class="btnfloat border-bottombox">
            <img class="imgbox" src="images/index/icon-sos.png">
            <div class="mui-media-body">
                <h3 class="bluecololr">SOS定位</h3>
                <p>老人通过使用智能通讯终端一键拨打服务热线进行求助，平台地图能迅速获取老人位置。</p>
            </div>
        </div>
        <div class="btnfloat borderbox border-bottombox">
            <img class="imgbox" src="images/index/icon-sh.png">
            <div class="mui-media-body">
                <h3 class="greencolor">生活服务工单</h3>
                <p>根据老人的需求类别，选择相应的服务商，生成工单、派单，系统以短信形式通知服务商家。</p>
            </div>
        </div>
        <div class="btnfloat border-bottombox">
            <img class="imgbox" src="images/index/icon-tel.png">
            <div class="mui-media-body">
                <h3 class="orangecolor">呼叫中心</h3>
                <p>软电话技术，免安装即插即用，耳麦、手机转接都可以，自动来电识别、示忙、示闲、录音功能、话务报表。</p>
            </div>
        </div>
        <div class="btnfloat borderbox border-bottombox">
            <img class="imgbox" src="images/index/icon-fw.png">
            <div class="mui-media-body">
                <h3 class="redcololr">服务商家管理</h3>
                <p>服务商家信息的管理、服务项目管理、服务人员的管理、工单接收、派单处理，可以使用手机APP完成。</p>
            </div>
        </div>
        <div class="btnfloat border-bottombox">
            <img class="imgbox" src="images/index/icon-jj.png">
            <div class="mui-media-body">
                <h3 class="bluecololr">居家安全</h3>
                <p>对接各类安防设备，如烟感、红外、摄像头等设备，出现意外时，社区及老人亲属可能第一时间接到报警。</p>
            </div>
        </div>
        <div class="btnfloat borderbox border-bottombox">
            <img class="imgbox" src="images/index/icon-yc.png">
            <div class="mui-media-body">
                <h3 class="greencolor">远程健康监控</h3>
                <p>通过智能健康监测仪器(如血压仪)自1231助测量健康参数，数据自动上传到平台，通过分析，数据异常平台自动报警。</p>
            </div>
        </div>
        <div class="btnfloat border-bottombox">
            <img class="imgbox" src="images/index/icon-zd.png">
            <div class="mui-media-body">
                <h3 class="orangecolor">主动关怀</h3>
                <p>编辑群发短信，将天气情况、保健护理、疾病预防、政府养老政策、吃药提醒等发送给老人。</p>
            </div>
        </div>
    </div>
    <!--底部导航-->
    <div class="wall"></div>
    <nav class="mui-bar-tab">
        <a class="mui-tab-item-ko mui-active" href="javascript:;" id="a_index">
            <span class="iconfont icon-homepage"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item-ko" href="product.html" id="a_cpzx">
            <span class="iconfont icon-commodity"></span>
            <span class="mui-tab-label">产品中心</span>
        </a>
        <a class="mui-tab-item-ko" href="cooperation.html" id="a_yjhz">
            <span class="iconfont icon-like"></span>
            <span class="mui-tab-label">硬件合作</span>
        </a>
        <a class="mui-tab-item-ko" href="aboutUs.html" id="a_about">
            <span class="iconfont icon-mine"></span>
            <span class="mui-tab-label">关于我们</span>
        </a>
    </nav>
</body>
<script src="js/swiper.js"></script>
<script>
    // swiper
    var swiper_button_next = document.querySelector('.swiper-button-next');
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 1,
        spaceBetween: 80,
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
    // 自动播放功能和鼠标经过暂停自动播放
    var swiper_wrapper = document.querySelector('.swiper-wrapper');
    var timer = setInterval(function() {
        swiper_button_next.click();
    }, 2000);
    swiper_wrapper.addEventListener('mouseenter', function() {
        clearInterval(timer);
    });
    swiper_wrapper.addEventListener('mouseleave', function() {
        timer = setInterval(function() {
            swiper_button_next.click();
        }, 2000);
    })
</script>

</html>